<template>
  <div id="app">
      <div class="con">
          <div class="left">
              <ul>
                  <li v-for="item in classify" :key="item.id" 
                    @click="change(item.id)"
                  >{{item.name}}</li>
              </ul>
          </div>
          <div class="right">
              <el-item v-for="p in products"  :key="p.id"
                    :url='p.img'
                    :name='p.name'
                    :price='p.price'
                    :id='p.id'
                    :num='p.num'
              ></el-item>
          </div>
      </div>
      <div class="btm" @click="status = true">
          总数量：{{totalNum}} 总价格：{{totalPrice}}
      </div>
      <el-dialog :buyList="buyList" v-show="status"
        @clear="clear"
        @close="status = false"
      ></el-dialog>
  </div>
</template>

<script>
import elItem from './components/el-item'
import elDialog from './components/dialog'
export default {
    name: 'App',
    components: {
        elItem,
        elDialog
    },
    data(){
        return {
            classify:[],
            type:1,
            products:[],
            buyList:JSON.parse(localStorage.getItem('buyList')) || [],
            status:false
        }
    },
    created(){
        this.$http.get('/api/classify').then((res) => {
            if(res.data.code === 1){
                this.classify = res.data.data;
                this.type = this.classify[0].id;
                return this.$http.get('/api/product',{params:{type:this.type}})
            }
        }).then((result) => {
            if(result.data.code === 1){
                this.products = result.data.data.map(item => {
                    item.num = 0;
                    this.buyList.forEach(b => {
                        if(b.id === item.id){
                            item.num = b.num
                        }
                    })
                    return item
                })
            }
        }).catch((error) => {
            console.warn(error)
        })

        this.$bus.$on('buy',(num,id) => {
            console.log(this);

            let index = this.products.findIndex(p => p.id === id);

            if(index != -1){
                this.products[index].num = num;
            }

            let isBuy = this.buyList.findIndex(b => b.id === id);

            if(isBuy === -1){
                this.buyList.push(this.products[index])
            }else{
                this.buyList[isBuy].num = num;
            }

            if(num === 0){
                this.buyList.splice(isBuy,1);
            }
            localStorage.setItem('buyList',JSON.stringify(this.buyList));
        })
    },
    computed:{
        totalNum(){
            return this.buyList.reduce((pre,cur) => {
                return pre + cur.num
            },0)
        },
        totalPrice(){
            return this.buyList.reduce((pre,cur) => {
                return pre + cur.num * cur.price
            },0)
        }
    },
    methods:{
        change(id){
            this.getData(id)
        },
        getData(id){
            this.$http.get('/api/product',{params:{type:id}})
            .then((result) => {
                if(result.data.code === 1){
                    this.buyList = JSON.parse(localStorage.getItem('buyList')) || [];
                    this.products = result.data.data.map(item => {
                        item.num = 0;
                        this.buyList.forEach(b => {
                            if(b.id === item.id){
                                item.num = b.num
                            }
                        })
                        return item
                    })
                }
            }).catch((error) => {
                console.warn(error)
            })
        },
        clear(){
            this.buyList.splice(0);
            localStorage.clear();
        }
    }
}
</script>

<style lang="scss">
*{
    margin:0;
    padding:0;
    list-style: none;
    box-sizing:border-box;
}
html,body{
    width:100%;
    height: 100%;
    overflow:hidden;
}

#app{
    width:100%;
    height:100%;
    overflow:hidden;
    display: flex;
    flex-direction:column;
}
.con{
    width:100%;
    flex:1;
    overflow:scroll;
    display:flex;
    .left{
        width:80px;
        border-right:1px solid gray;
        li{
            width:100%;
            height:44px;
            text-align:center;
            line-height:44px;
            border-bottom:1px solid gray;
        }
    }
}
.btm{
    width:100%;
    height:44px;
    background: pink;
}
</style>
